import Vue from "vue"

import VueRouter from "vue-router"

import Home from "@/pages/Home"

import Discover from "@/pages/Discover"

//把路由注入到所有的子组件

Vue.use(VueRouter)


//定义路由配置 路由配置一般由 path和component组成

//配置路由的步骤

//1.构建视图组件

//2.配置routes 一个path映射一个component

//3.router-view 配置视口

const routes = [
    {
        path: "/home",
        name: "home",
        props: true,
        component: Home
    },
    {
        path: "/discover", //路径对大小写不敏感
        component: Discover,
        //重定向
        redirect: "/discover/toplist",
        //children这个属性和routes基本是一直
        //二级路径的最前面不要带"斜杠/"
        children: [
            {
                //具名路由
                name: "toplist",
                path: "toplist",
                // component: () => import(/* webpackChunkName:'toplist'*/'@/pages/Discover/Toplist')
                // 多视图写法
                components: {
                    toplist: () => import(/* webpackChunkName:'toplist'*/'@/pages/Discover/Toplist'),
                    djradio: () => import(/* webpackChunkName:'djradio'*/'@/pages/Discover/Djradio')
                }
            },
            {
                name: "djradio",
                path: "djradio",
                component: () => import(/* webpackChunkName:'djradio'*/'@/pages/Discover/Djradio')
            }
        ]
    },
    {
        path: "/friend",
        //路由懒加载,按需加载
        //将这段代码进行切割,加快首屏渲染速度
        component: () => import(/*webpackChunkName:'friend' */'@/pages/Friend')
    },
    //匹配优先级  同一个路径可以匹配多个组件 优先级 按照定义的顺序 谁先定义就先匹配谁
    {
        path: "/goods",
        component: () => import(/* webpackChunkName:'goods' */'@/pages/Goods')
    },
    // {
    //     path: "/goods",
    //     component: () => import(/* webpackChunkName:'page404' */'@/pages/Page404')
    // },
    {
        path: "/detail/:id", //动态路由参数 params 参数
        props: true,//路由解耦
        component: () => import(/* webpackChunkName:'detail' */'@/pages/Detail')
    },
    {
        path: "*",
        component: () => import(/* webpackChunkName:'404' */'@/pages/Page404')
    }, {
        path: "/count",
        component: () => import(/* webpackChunkName:'count' */'@/pages/Count')
    },
    {
        path: "/",
        redirect: "/axios"
    }, {
        path: "/gouwuche",
        component: () => import(/* webpackChunkName:'gouwuche' */'&/pages/Gouwuche')
    }, {
        path: "/axios",
        component: () => import(/* webpackChunkName:'axios' */'@/pages/AxiosUse')
    }
]

export default new VueRouter({
    // mode: "abstract",
    routes,
})